<template>
	<div class="detail_main_right" v-show="isAll">
		<div class="detail_right_title">
			<div class="l like_btn" @click="closeAll">
				<img src="@/images/detail_right_title.png" />
				<span>收起</span>
			</div>
		</div>
		<div class="detail_right_body beautifulScroll">
			<img :src="baseurl + caseinfo.application" v-if="isAll == 1 && caseinfo.application"
				class="detail_right_bodyicon" />
			<img :src="baseurl + caseinfo.hospitalCase" v-if="isAll == 2 && caseinfo.hospitalCase"
				class="detail_right_bodyicon" />
			<div class="detail_right_topics" v-if="isAll == 3">
				<div class="detail_right_info">
					<div class="l">练习题({{ questionIndex + 1 }}/共{{ questions.length }}题)</div>
					<div class="r" @click="showlist = true">答题卡</div>
				</div>
				<div class="detail_right_topic beautifulScroll" v-if="questionIndex >= 0">
					<questionview :form="item" :letters="letters" :questionTypes="questionTypes"
						v-for='(item, index) in questions' v-if="item.questionIndex == questionIndex"></questionview>
					<div class="clearfix" v-show="showanswer">
						<div class="topic_resultinfo">
							我的答案：{{ questions[questionIndex].userAnswer }}
						</div>
						<div class="topic_resultinfo">
							正确答案：
							<span class="editor_box" v-html='questions[questionIndex].answer'></span>
						</div>
						<div class="topic_resultinfo">
							难度： <span v-for='item in difficultys'
								v-if="item.value == questions[questionIndex].difficulty">{{ item.name }}</span>
						</div>
						<div class="topic_resultinfo" v-if="questions[questionIndex].analysis">
							解析：<span class="editor_box" v-html='questions[questionIndex].analysis'></span>
						</div>
					</div>
				</div>
				<div class="detail_right_control">
					<el-button type='primary' size='small' @click='changeIndex(-1)'
						:disabled='questionIndex <= 0'>上一题</el-button>
					<el-button type='primary' size='small' @click='showanswer = !showanswer'>
						{{ showanswer ? '隐藏答案' : '查看答案' }}
					</el-button>
					<el-button type='primary' size='small' @click='changeIndex(1)'
						:disabled='questionIndex >= questions.length - 1'>下一题</el-button>
				</div>
			</div>
		</div>
		<div class="detail_main_rightback" v-show="showlist" @click.stop="showlist = false">
			<div class="detail_main_topicnum" @click.stop>
				<div class="detail_topicnum_title">
					<div class="csae_dio_title">
						答题卡
					</div>
					<div class="detail_topicnum_close like_btn" @click.stop="showlist = false">
						<i class="el-icon-close"></i>
					</div>
				</div>
				<div class="detail_topicnum_body beautifulScroll">
					<div class="question_types" v-if="getArray(item.value).length"
						v-for="(item, index) in questionTypes">
						<div class="question_typeinfo">
							{{ item.name }}<span>（共{{ getArray(item.value).length }}题）</span>
						</div>
						<div class="question_typenums clearfix">
							<div class="question_typenum"
								@click.stop="questionIndex = topic.questionIndex; showlist = false"
								:class='getTopicClass(topic)' v-for="topic in getArray(item.value)">{{ topic.indexId }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import questionview from "@/components/questions.vue"
import questionsjs from '@/components/questions.js'
export default {
	mixins: [questionsjs],
	components: {
		questionview,
	},
	props: {
		caseinfo: Object,
		isAll: String
	},
	data() {
		return {
			knowledgePoints: [],
			showlist: false,
			showanswer: false,
			allOver: false,
			knowledgeGraph: '',
			questions: [],
			questionIndex: -1,
			letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			difficultys: [{
				name: '简单',
				value: 'SIMPLE'
			}, {
				name: '中等',
				value: 'MEDIUM'
			}, {
				name: '困难',
				value: 'DIFFICULTY'
			}],
			questionTypes: [{
				name: '单选题',
				value: 'SINGLE'
			}, {
				name: '多选题',
				value: 'MULTIPLE'
			}, {
				name: '判断题',
				value: 'JUDGE'
			}, {
				name: '简答题',
				value: 'SHORT'
			}, {
				name: '病例解析题',
				value: 'ANALYSIS'
			}],

			SINGLE: [],
			MULTIPLE: [],
			JUDGE: [],
			ANALYSIS: [],
			SHORT: [],
			//最初
			SINGLEORI: [],
			MULTIPLEORI: [],
			JUDGEORI: [],
			ANALYSISORI: [],
			SHORTORI: [],
			//试题分数
			SINGLENUM: 0,
			MULTIPLENUM: 0,
			JUDGENUM: 0,
			ANALYSISNUM: 0,
			SHORTNUM: 0,
		}
	},
	created() {
		this.getTest()
	},
	mounted() {

	},
	methods: {
		closeAll() {
			this.$emit('closeAll')
		},
		changeIndex(addnum) {
			this.showanswer = false
			this.questionIndex += addnum
		},
		getTest() {
			var questionJson = this.caseinfo.questionJson ? JSON.parse(this.caseinfo.questionJson) : [];
			this.getInfoList(questionJson)
		},
		getInfoList(questions) {
			var questionIndex = -1;
			questions.map((item, index) => {
				var indexId = this[item.questionType + "ORI"].length + 1;
				questionIndex++;
				var optionObject = {};
				var optionsArr = [];
				var options = item.options;
				if (options) {
					optionObject = JSON.parse(options);
					optionsArr = Object.values(optionObject);
				}
				var userAnswer = item.userAnswer;
				var userAnswers = [];
				if (userAnswer) {
					userAnswers = userAnswer.split('');
				}

				var topic = Object.assign({}, item, {
					paperId: this.paperId,
					score: item.score || 0,
					questionScore: item.questionScore || 0,
					indexId: indexId,
					questionIndex: questionIndex,
					optionsArr: optionsArr,
					answer: item.answer,
					userAnswer: userAnswer,
					userAnswers: userAnswers,
					overed: userAnswer ? true : false, //是否已经答题
					isError: item.isError, //是否正确
				})
				this.pushList(topic);
				this[item.questionType + 'ORI'].push(item)
			})
			this.questionIndex = 0;
		},
	},
}
</script>